<template>
   <div class="table_box">
      <div class="tabls">
          <el-button @click="lastclick">上一周</el-button>
          <span>{{thedaysd}}</span>
          <el-button @click="nextclick">下一周</el-button>
          <el-button @click="tododay">今天</el-button>
          <span>{{todayDate}}</span>
      </div>    
      <div class="table_header">
          <div class="weekday" v-for="(item,index) in weekDayArr" :key="index">
              <span>{{item.adate}}</span>
              <span>{{item.days}}</span>
          </div>
      </div>
      <div class="tables">
        <el-table :data="cusres" border style="width: 100%" ref="multipleTable">
          <el-table-column prop="data1" label="安排1" align="center">
            <template slot-scope="{row}">
              <div v-for="(rowitem,rowindex) in row.data1"  class="yuh" :key="rowindex">
                <span>{{rowitem.map.masterinfo.nick_name}}</span>
                <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
              </div>
              
            </template>
          </el-table-column>
          <el-table-column prop="data2" label="安排2" align="center">
            <template slot-scope="{row}">
              <div v-for="(rowitem,rowindex) in row.data2"  class="yuh" :key="rowindex">
                <span>{{rowitem.map.masterinfo.nick_name}}</span>
                <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data3" label="安排3" align="center">
            <template slot-scope="{row}">
              <div v-for="(rowitem,rowindex) in row.data3"  class="yuh" :key="rowindex">
                <span>{{rowitem.map.masterinfo.nick_name}}</span>
                <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data4" label="安排4" align="center">
            <template slot-scope="{row}">
            <div v-for="(rowitem,rowindex) in row.data4" class="yuh" :key="rowindex">
                 <span>{{rowitem.map.masterinfo.nick_name}}</span>
                 <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data5" label="安排5" align="center">
            <template slot-scope="{row}">
               <div v-for="(rowitem,rowindex)  in row.data5" class="yuh" :key="rowindex">
                 <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
                  <span v-if="rowitem.type =='single_class'">类型：一对一课程</span>
                  <span v-else>类型：直播课程</span>
                <span>{{rowitem.map.masterinfo.nick_name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data6" label="安排6" align="center">
            <template slot-scope="{row}">
              <div v-for="(rowitem,rowindex) in row.data6"  class="yuh" :key="rowindex">
                <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
                <span v-if="rowitem.type =='single_class'">类型：一对一课程</span>
                <span v-else>类型：直播课程</span>
               <span>{{rowitem.map.masterinfo.nick_name}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="data7" label="安排" @click="shotir" align="center">
            <template slot-scope="{row}">
              <div v-for="(rowitem,rowindex) in row.data7"  class="yuh" :key="rowindex">
                 <span>{{rowitem.start_times}}-{{rowitem.end_times}}</span>
                <span v-if="rowitem.type =='single_class'">类型：一对一课程</span>
                <span v-else>类型：直播课程</span>
               <span>{{rowitem.map.masterinfo.nick_name}}</span>
              </div>
            </template>
          </el-table-column>
          
        </el-table>
      </div>
   </div>
</template>
<script>
export default {
    data(){
        return {            
            currentFirstDate:"",
            clen:7,
            todayDate:"",
            weekDayArr:[],
            thedaysd:"",  
            Timersdata:'',
            cusres:[
                 {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
                {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
                {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
                {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
                {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
                {
                 data1:[

                  ],
                  data2:[

                  ],
                  data3:[

                  ],
                  data4:[

                  ],
                  data5:[

                  ],
                  data6:[

                  ],
                  data7:[

                  ],
                },
              
            ]   
        }
    },
    props:['mechanism_id'],
    created() {
        this.todayDate=this.formatDates(new Date())
        this.thedaysd = this.formatDate(new Date())
        this.setDate(new Date())
    },
    mounted() {
        this.GetSchedule();
    },
    methods: {
        // 日期格式处理
        formatDates(date){             
          var month = (date.getMonth()+1)+'月';
          var day = date.getDate()+'日';
          return month+' ' +day;
        },  
        formatDate(date){ 
          var years = (date.getFullYear())+'-'     
          var month = (date.getMonth()+1)+'-';      
          var day = date.getDate();
          var week = ''+['星期天','星期一','星期二','星期三','星期四','星期五','星期六'][date.getDay()]+'';  
          this.thedaysd =years + month +day
          return week;
        },  
        formatDay(date){ 
          var years = (date.getFullYear());    
          var month = (date.getMonth()+1);      
          var day = date.getDate();
          var CurrentDate = ""; 
          if (month >= 10 ) 
           { 
            CurrentDate += month + "-"; 
           } 
           else
           { 
            CurrentDate += "0" + month +"-"; 
           } 
           if (day >= 10 ) 
           { 
            CurrentDate += day ; 
           } 
           else
           { 
            CurrentDate += "0" + day ; 
           } 
          this.Timersdata =years+"-" + CurrentDate
          return day;
        },
        tododay(){
          this.setDate(new Date(),1)
          this.GetSchedule()
        },
        addDate(date,n){        
          date.setDate(date.getDate()+n);        
          return date;
        },  
        //
        setDate(date){  
          this.weekDayArr =[]         
            var week = date.getDay()-1;
            date = this.addDate(date,week*-1);
            this.currentFirstDate = new Date(date);
            for(var i = 0;i<this.clen; i++){     
              // var days = this.formatDate(i==0 ? date : this.addDate(date,1))
              this.weekDayArr.push({"adate":this.formatDate(i==0 ? date : this.addDate(date,1)),"days":this.formatDay(i==0 ? date : this.addDate(date,0)),'Timersdata':this.Timersdata})

            }                
        },
        //上一周 
        lastclick(){
            this.weekDayArr=[]
            this.setDate(this.addDate(this.currentFirstDate,-7));
            this.GetSchedule()
               
        },
        //下一周
        nextclick(){ 
          this.weekDayArr=[]                
          this.setDate(this.addDate(this.currentFirstDate,7));
          this.GetSchedule()
        },
        GetSchedule(){
          var  start_time =this.weekDayArr[0].Timersdata +' '+'00:00:00'
          var  end_time =this.weekDayArr[6].Timersdata +' '+'23:59:59'
          var data ={
            mechanism_id : this.mechanism_id,
            offset:'+8',
            start_time:start_time,
            end_time:end_time
          }
          this.$axios({
            method:'get',
            url:'http://101.37.66.151:8768/eg-api/user/masterAppointment/queryMechanismSchedule',
            params:data,
          }).then((res) =>{
            console.log(res.data.data,'课程表')
            res.data.data.open_class_info.forEach(e => {
              var timearr = e.end_time.replace(" ", ":").replace(/\:/g, "-").split("-");
              var startime = e.start_time.replace(" ", ":").replace(/\:/g, "-").split("-");
              e.end_times= timearr[3] + ":" + timearr[4];
              e.start_times= startime[3] + ":" + startime[4];
              for( var i=0;i<res.data.data.open_class_info.length;i++){
                  this.cusres[i].data4 = []
              var dateObject = new Date(e.start_time)
              if(dateObject.getDay() ==0){
                e.week = '星期天'
              }else if(dateObject.getDay() ==1){
                e.week = '星期一'
              }else if(dateObject.getDay() ==2){
                e.week = '星期二'
              }else if(dateObject.getDay() ==3){
                e.week = '星期三'
              }else if(dateObject.getDay() ==4){
                this.cusres[i].data4.push(e)
              }else if(dateObject.getDay() ==5){
                this.cusres[i].data5.push(e)
                // console.log( this.cusres[0].data5,'-0-')
              }else if(dateObject.getDay() ==6){
                this.cusres[i].data6.push(e)
               }
              }
            });
            res.data.data.single_class_info.forEach(e => {
              for( var i=0;i<res.data.data.single_class_info.length;i++){
                var timearr = e.end_time.replace(" ", ":").replace(/\:/g, "-").split("-");
                var startime = e.start_time.replace(" ", ":").replace(/\:/g, "-").split("-");
                e.end_times= timearr[3] + ":" + timearr[4];
                e.start_times= startime[3] + ":" + startime[4];
                var dateObject = new Date(e.start_time)
                if(dateObject.getDay() ==0){
                  e.week = '星期天'
                }else if(dateObject.getDay() ==1){
                  e.week = '星期一'
                }else if(dateObject.getDay() ==2){
                  e.week = '星期二'
                }else if(dateObject.getDay() ==3){
                  e.week = '星期三'
                }else if(dateObject.getDay() ==4){
                  this.cusres[i].data4.push(e)
                }else if(dateObject.getDay() ==5){
                  this.cusres[i].data5.push(e)
                  console.log( this.cusres[i].data5,'-01221-')
                }else if(dateObject.getDay() ==6){
                  this.cusres[i].data6.push(e)
                }
              }   
            });
          }).catch((error) =>{
            console.log(error)
          })
        },
        shotir(e){
          console.log(this.mechanism_id)
        }
    },
}
</script>
<style lang="less">
.tabls{
   margin-top: 30px;
   text-align: center;
}
.table_header{ 
  display:flex; 
  justify-content: center; 
  color:#8e8e8e; 
 
  // background: #e9f0fe; 
  border-top:1px solid #f5f4f7; 
  border-right:1px solid #f5f4f7;
}
.week_one{ 
  text-align: center; 
  line-height: 50px; 
  border-bottom:1px solid #f5f4f7;
  border-left:1px solid #f5f4f7; 
  width:200px; 
}
.weekday{ 
  flex:1; 
  text-align: center; 
  line-height: 48px; 
  border-bottom:1px solid #f5f4f7; 
  margin-top: 30px;
  /* border-left:1px solid #f5f4f7;  */
  background: #18BABB; 
  display: flex;
  flex-wrap: wrap;
  span{
    width: 100%;
    height: 40px;
    color: #ffffff;
  }
}
.tables{
  position: relative;
  width: 100%;
  padding-bottom: 100px;
  table{
    position: relative;
    width: 100%;
    border-bottom:0px;
    // border: 1px solid  #18BABB;
    tr{
      th,td{
        width: 150px;
        border: 1px solid  #18BABB;
        height: 90px;
      }
      th{
        span{
         
        }
      }
    }
  }
}
.yuh{
  display: flex;
  flex-wrap: wrap;
}
.yuh>span{
  display: inline-block;
  width: 100%;
}
  .has-gutter>tr>th>.cell{
    display: inline-block;
    width:61px;
    height:36px;
    line-height: 36px;
    border:1px solid rgba(24,186,187,1);
    color: #18BABB;
    font-size: 14px;
    cursor: pointer;
    border-radius:5px;
  }
</style>